<template>

  <view>


    <u-subsection :list="list" :current="curNow" font-size="13px" @change="sectionChange">

    </u-subsection>



	  <view class="container" v-if="isShow===1">
      <view class="top tac fw">我的推荐人</view>
      <view class="reference disb aic" v-for="item in tjData" :key="item.id">
        <view class="left disp aic">
          <image :src="item.avatar" mode=""></image>
          <view class="fw">{{ item.name ? item.name:'' }}</view>
        </view>
        <view class="fw">{{ item.mobile }}</view>
      </view>

      <view v-if="Object.keys(tjData).length === 0">
        <u-empty text="暂无推荐人！" mode="list"></u-empty>
      </view>

	    <view class="top tac fw">我的推荐</view>
	    <view class="reference disb aic" v-for="item in data" :key="item.id">
	      <view class="left disp aic">
	        <image :src="item.avatar" mode=""></image>
	        <view class="fw">{{ item.name ? item.name:'' }}</view>
	      </view>
	      <view class="fw">{{ item.mobile }}</view>
	    </view>
	  
	    <view v-if="Object.keys(data).length === 0">
	      <u-empty text="查无推荐用户！" mode="list"></u-empty>
	    </view>
	  </view>

    <view class="container" v-if="isShow===2">

      <view v-if="Object.keys(orderList).length > 0">
      <view class="table">
        <view class="tr bg-w">
          <view class="th">名字</view>
          <view class="th">产品名称</view>
          <view class="th ">审核进度</view>
          <view class="th ">申请时间</view>
          <view class="th ">实际资产流动性测算</view>
        </view>

        <view class="tr" style="border-bottom: 1px solid rgb(228, 231, 237);margin-top: 10px;" v-for="item in orderList" :key="item.id">
            <view class="td">{{item.name}}</view>
            <view class="td">{{item.productName}}</view>
            <view class="td">{{item.applyStateZh}}</view>
            <view class="td">{{item.createTime?item.createTime:''}}</view>
            <view class="td">{{item.practicalAmount?item.practicalAmount:''}}</view>
        </view>
      </view>

      </view>

      <view v-if="Object.keys(orderList).length === 0">
        <u-empty text="暂无申请贷款记录" mode="list"></u-empty>
      </view>

    </view>

    <view v-if="isShow===3" style="margin-left: 25%;margin-top: 20%;">
      <u-loading-page loading-text="加载中..." :loading="loading"></u-loading-page>
<!--      <u-popup v-model="show" mode="center"  border-radius="14" width="500rpx" height="600px">-->
<!--        <view>出淤泥而不染，濯清涟而不妖</view>-->
<!--      </u-popup>-->
<!--      <u-button @click="openShow()">显示我的二维码</u-button>-->
      <u-image width="350rpx" height="350rpx" :src="codeImg" v-if="Object.keys(codeImg).length > 0"></u-image>

      <view v-if="Object.keys(codeImg).length === 0 && loading===false">
        <u-empty text="无推荐码" mode="list"></u-empty>
      </view>
    </view>
    <view v-if="Object.keys(codeImg).length > 0 && isShow ===3" style="margin-top: 10px;text-align: center">保存图片/截图，推荐人进行扫码</view>

  </view>



</template>

<script>
import {getRecommend, getRecommendOrderList, addReference, getWeChatTJQR} from "../../api/profile.js"
import {getUser} from '../../api/login.js'
export default {
  data() {
    return {
      show: false,
      list: ['我的推荐', '推荐人订单','我的推荐码'],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      curNow: 0,
      isShow:1,
      data: [],
      tjData:[],
      orderList:[],
      isReference: 0,
      account: '',
      myRecommed: [],
      codeImg: '',
      loading: true,
      // referrer: uni.getStorageSync('userInfo').referrer,
    }
  },
  onLoad() {
    this.getMyRecommends()
    this.getMyRecommendOrderLists();
  },
  onShow() {
    //this.getUserInfo()
  },
  methods: {
    openShow(){
      this.show = true
    },
    sectionChange(index) {
      this.curNow = index;
      if (index===0){
        this.isShow = 1
      }else if (index===1){
        this.isShow = 2
      }else if (index===2){
        this.isShow = 3
        //生成我的二维码
        getWeChatTJQR().then(res => {
          if (res.data.code===200){
            this.loading= false
            this.codeImg = res.data.data
          }else {
            this.loading= false
            uni.$u.toast(res.data.message)
          }
          //this.codeImg = res.data
        })
      }
    },
    //获取我的推荐
    getMyRecommends() {
      getRecommend("1").then(res => {
        this.data = res.data
      })
      getRecommend("2").then(res => {
        this.tjData = res.data
      })
    },
    //获取我的推荐人订单列表
    getMyRecommendOrderLists() {
      //userId: uni.getStorageSync('userInfo').id
      getRecommendOrderList({}).then(res => {
        this.orderList = res.data
      })
    },
    // 提交我的推荐人
    // upDate() {
    //   if (this.account) {
    //     addReference({phone: this.account}).then(res => {
    //       if (res.code == 0) {
    //         uni.$u.toast('添加成功！')
    //         setTimeout(() => {
    //           this.getUserInfo()
    //         }, 1000)
    //       } else {
    //         uni.$u.toast('添加失败，请重试！')
    //       }
    //     })
    //   } else {
    //     uni.$u.toast('请填写推荐人用户名或手机号')
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 10rpx;
  margin-top: 10px;
  .top {
    padding: 30rpx;
  }

  .listBars {
    box-shadow: 0 0 20rpx #ccc;
  }

  .reference {
    padding: 40rpx;
    margin: 10rpx 0;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 4rpx #ccc;

    .left {
      image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }
    }
  }

  .noRe {
    /deep/ .u-input {
      margin: 40rpx 0;
      background-color: #ebebeb;
    }

    .upBtn {
      line-height: 80rpx;
      border-radius: 40rpx;
      background-color: rgb(61, 106, 246);
    }
  }
}

/*表格样式*/
.table {
  border: 0px solid darkgray;
  font-size: 12px;
}
.tr {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 2rem;
  align-items: center;
}
.td {
  width:40%;
  justify-content: center;
  text-align: center;

}
.bg-w{
  background: snow;
}

.th {
  width: 40%;
  justify-content: center;
  background: #f5f6f8;
  color: #0d0c0c;
  display: flex;
  height: 2.5rem;
  align-items: center;
  border-right: 1px solid rgb(228, 231, 237);
}


.my-code{
  margin-top: 10%;
}
.code-btn{
  background: #01d0be;
  border-radius: 20px;
  padding: 0.5rem 1.4rem;
  border: none;
  color: #fff;
  font-size: 0.92rem;
}

</style>
